<template>
	<view class="box">
		<view class="top">
			<button class="btn" @click="handleCompleteInfo">完善资料</button>
		</view>
		<!-- 登录信息 -->
		<view class="user">
			<image :src="userImg" alt="" class="user-img" />
			<view class="info">
				<text>{{userInfo.nickname}}</text>
				<text>商家编号：{{userInfo.merchantId}}</text>
				<button @click="copyNumber">复制编号</button>
			</view>
		</view>
		<!-- 数据统计 -->
		<view class="data">
			<!-- 数据统计 -->
			<view class="total">
				<view class="total_one">
					<text class="move_left">数据统计</text>
				</view>
				<view class="time_btn move_left">
					<button @click="updateQueryData('all')" style="width: 60rpx;">全部</button>
					<button @click="updateQueryData('today')" style="width: 60rpx;">今日</button>
					<button @click="updateQueryData('yesterday')" style="width: 120rpx;">昨日</button>
					<button @click="updateQueryData('last30day')" style="width: 120rpx;">近30日</button>
				</view>
				<view class="total_one">
					<view class="total_two move_left">
						<text>消耗</text>
						<span>{{userInfo.allConsume}}</span>
					</view>
					<view class="total_two">
						<text>有效数量</text>
						<span>{{userInfo.effectiveCount}}</span>
					</view>
					<view class="total_two move_right">
						<text>单价</text>
						<span>{{userInfo.allPrice}}</span>
					</view>
				</view>
			</view>
			<view class="items">
				<view class="items_txt">
					<text class="move_left">待审核</text>
					<view class="items_btn">
						<span>{{ userInfo.auditCount }}条</span>
						<button @click="handleAudit">审核</button>
					</view>

				</view>
				<view class="items_txt">
					<text class="move_left">账户余额</text>
					<view class="items_btn">
						<span>￥{{userInfo.balance?userInfo.balance:0}}</span>
						<button @click="handleRecharge">充值</button>
					</view>
				</view>
				<view class="items_txt">
					<text class="move_left">还可使用系统</text>
					<view class="items_btn">
						<span>{{userInfo.daysRemaining?userInfo.daysRemaining:"#"}}天</span>
						<button @click="handleRenew">续费</button>
					</view>
				</view>
				<view class="items_txt">
					<text class="move_left">店铺管理</text>
					<button @click="handleManageShop" class="move_right">管理</button>
				</view>
				<view class="items_txt">
					<text class="move_left">审核记录</text>
					<button @click="handleViewRecord" class="move_right">查看</button>
				</view>
				<view class="items_txt">
					<text class="move_left">卡片印刷</text>
					<button @click="handlePurchasePrint" class="move_right">印刷</button>
				</view>
				<view class="items_txt">
					<text class="move_left">黑名单管理</text>
					<button @click="handleBlacklist" class="move_right">管理</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		getMerchantInfo
	} from '@/common/api.js'


	// 模拟用户头像图片地址，可根据实际情况替换获取方式
	const userImg = ref('https://iknow-pic.cdn.bcebos.com/a9d3fd1f4134970af7a1f9b187cad1c8a6865d5a');

	const userInfo = ref({
		"auditCount": "0",
		"allPrice": 0,
		"auditCount": 0,
		"avatar": "",
		"balance": 0,
		"daysRemaining": 0,
		"effectiveCount": 0,
		"merchantId": "",
		"nickname": "",
	});

	const isFirstLogin = ref(false);
	onMounted(() => {
		// 获取商户信息
		getMerchantInfo('all').then((res) => {
			// console.log(res);
			if (res.code === 200) {
				userInfo.value = res.data;

				// 接收其他页面跳转到当前页面传入的参数
				const params = getCurrentPages().pop().options?.isFirstLogin;
				isFirstLogin.value = params;

				// 如果是第一次登录，等待 1 秒后弹出提示框
				if (isFirstLogin.value === "true") {
					setTimeout(() => {
						uni.showModal({
							title: '温馨提示',
							content: '请完善个人信息',
							success(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.navigateTo({
										// 跳转到完善商户信息界面
										url: '', // 替换为你的页面路径
									});
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
						});
					}, 1000); // 延迟 1 秒
				}
			}
		});
	});
	// 处理完善资料按钮点击事件，这里只是示例，需按实际需求完善逻辑
	const handleCompleteInfo = () => {
		uni.navigateTo({
			// 跳转到完善用户信息界面
			url: ''
		});
		// 可以添加跳转到完善资料页面等相关逻辑
	};

	// 处理复制编号按钮点击事件，这里只是示例，需按实际需求完善逻辑
	const copyNumber = () => {
		uni.setClipboardData({
			data: userInfo.value.merchantId + "", // 要复制的文本内容
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'none',
				});
			},
			fail: (err) => {
				console.log(err);
				uni.showToast({
					title: '复制失败，请重试',
					icon: 'none',
				});
			},
		});
	};

	// 以下是各个按钮对应的点击事件处理函数，目前都只是简单打印日志，需按实际业务完善逻辑
	const updateQueryData = (time) => {
		getMerchantInfo(time).then((res) => {
			console.log(res);
			if (res.code === 200) {
				userInfo.value = res.data;
				console.log(userInfo.value);
			}
		})
	};



	const handleAudit = () => {
		console.log('点击了审核按钮');
		uni.navigateTo({
			url: '',
			success: () => {
				console.log('跳转成功');
			},
			fail: (error) => {
				console.error('跳转失败:', error);
				uni.showToast({
					title: '当前跳转失败，请检查！',
					icon: 'none',
				});
			},
		});
	};

	const handleRecharge = () => {
		console.log('点击了充值按钮');
		uni.navigateTo({
			url: '',
			success: () => {
				console.log('跳转成功');
			},
			fail: (error) => {
				console.error('跳转失败:', error);
				uni.showToast({
					title: '当前跳转失败，请检查！',
					icon: 'none',
				});
			},
		});
	};

	const handleRenew = () => {
		console.log('点击了续费按钮');
		uni.navigateTo({
			url: '',
			success: () => {
				console.log('跳转成功');
			},
			fail: (error) => {
				console.error('跳转失败:', error);
				uni.showToast({
					title: '当前跳转失败，请检查！',
					icon: 'none',
				});
			},
		});
	};

	const handleManageShop = () => {
		console.log('点击了店铺管理按钮');
		uni.navigateTo({
			url: '',
			success: () => {
				console.log('跳转成功');
			},
			fail: (error) => {
				console.error('跳转失败:', error);
				uni.showToast({
					title: '当前跳转失败，请检查！',
					icon: 'none',
				});
			},
		});
	};

	const handleViewRecord = () => {
		console.log('点击了查看审核记录按钮');
		uni.navigateTo({
			url: '',
			success: () => {
				console.log('跳转成功');
			},
			fail: (error) => {
				console.error('跳转失败:', error);
				uni.showToast({
					title: '当前跳转失败，请检查！',
					icon: 'none',
				});
			},
		});
	};
	//跳转卡片印刷
	const handlePurchasePrint = () => {
		uni.navigateTo({
			url: '/pages/card_printing/card_printing',
			success: () => {
				console.log('跳转成功');
			},
			fail: (error) => {
				console.error('跳转失败:', error);
				uni.showToast({
					title: '当前跳转失败，请检查！',
					icon: 'none',
				});
			},
		});

	};
	// 黑名单管理
	const handleBlacklist = () => {
		uni.navigateTo({
			url: '',
			success: () => {
				console.log('跳转成功');
			},
			fail: (error) => {
				console.error('跳转失败:', error);
				uni.showToast({
					title: '当前跳转失败，请检查！',
					icon: 'none',
				});
			},
		});
	}
</script>

<style lang="scss" scoped>
	/* 去除默认样式 */
	page,
	view,
	text,
	image,
	button,
	input,
	textarea,
	select {
		margin: 0;
		padding: 0;
	}

	.box {
		width: 93%;
		margin: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.box>view {
		margin-top: 20rpx;
	}

	/* 按钮 */
	.top {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.btn {
		width: 180rpx;
		height: 70rpx;
		text-align: center;
		background-color: #f62c33;
		font-size: 30rpx;
		color: white;
		margin-right: 0;
		border: none;
		border-radius: 10rpx;
	}

	/* 用户信息 */
	.user {
		width: 95%;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-radius: 10rpx;
		border: none;
		box-shadow: 8rpx -2rpx 8rpx 0rpx rgba(0, 0, 0, 0.3);
		padding: 20rpx;
	}

	.user-img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
	}

	.info {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.info text {
		font-size: 30rpx;
		margin-top: 4rpx;
	}

	.info button {
		height: 60rpx;
		width: 144rpx;
		line-height: 60rpx;
		margin-top: 4rpx;
		font-size: 24rpx;
		text-align: center;
		background: none;
		border: 2rpx solid;
		border-radius: 10rpx;
	}

	/* 数据信息 */
	.data {
		width: 100%;
		/* height: 1800rpx; */
	}

	/* 数据统计 */
	.total {
		width: 100%;
		margin: auto;
		height: 340rpx;
		background: #f62c33;
		color: white;
		border-radius: 6rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		box-shadow: 0 16rpx 18rpx -3rpx rgba(0, 0, 0, 0.3);
	}

	.total_one {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.total_two {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 数据统计按钮 */
	.time_btn {
		display: flex;
		flex-direction: row;
		color: white;
	}

	.data button {
		height: 60rpx;
		text-align: center;
		font-size: 20rpx;
		background: none;
		color: white;
		border: 2rpx solid white;
		border-radius: 10rpx;
		margin-left: 4rpx;
	}

	.total_two text {
		font-size: 30rpx;
	}

	.total_two span {
		font-weight: 500;
		font-size: 36rpx;
	}

	/* 其他 */
	.items>view {
		width: 100%;
		height: 100rpx;
		background: white;
		margin-top: 20rpx;
		border-radius: 6rpx;
		font-size: 30rpx;
		box-shadow: 0 10rpx 10rpx -10rpx rgba(0, 0, 0, 0.3);
	}

	.items_txt {
		display: flex;
		background: white;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.items_txt button {
		width: 100rpx;
		height: 60rpx;
		background: #f62c33;
		border: none;
		font-size: 24rpx;
		text-align: center;
		color: white;
	}

	.items_txt span {
		font-weight: bold;
	}

	.items_btn {
		display: flex;
		margin-right: 2%;
		justify-content: space-between;
		width: 31%;
		align-items: center;
	}

	.move_left {
		margin: 0;
		padding: 0;
		margin-left: 2%;
	}

	.move_right {
		margin: 0;
		padding: 0;
		margin-right: 2%;
	}
</style>